<script setup>
import useAppStore from '@/store/modules/app'
import useDynamicAppStore from '@/store/test/dynamicApp'
import useOtherAppStore from '@/store/test/otherApp'

const store = useAppStore()
const otherStore = useOtherAppStore()
const storeDynamic1 = useDynamicAppStore('app1')()
const storeDynamic2 = useDynamicAppStore('app2')()

const add = () => {
  store.setSize(store.size + 1)
}
const addOther = () => {
  otherStore.setSize(otherStore.size + 1)
}
const add1 = () => {
  storeDynamic1.setSize(storeDynamic1.size + 1)
}
const add2 = () => {
  storeDynamic2.setSize(storeDynamic2.size + 1)
}

const reset = () => {
  store.setSize(0)
  otherStore.setSize(0)
  storeDynamic1.setSize(0)
  storeDynamic2.setSize(0)
}
</script>

<template>
  <div>
    <button @click="add">add</button>
    <button @click="addOther">addOther</button>
    <button @click="add1">add1</button>
    <button @click="add2">add2</button>
    <button @click="reset">reset</button>
    <h1>{{ store.size }}</h1>
    <h1>{{ otherStore.size }}</h1>
    <h1>{{ storeDynamic1.size }}</h1>
    <h1>{{ storeDynamic2.size }}</h1>
  </div>
</template>
